<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="../js/axios.min.js" type="text/javascript"></script>
    <script src="../js/vue.js" type="text/javascript"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <title>申请成为教练</title>
</head>
<body>
<div id="app">
    <el-form ref="form" :model="coachApplyForm" label-width="80px">
        <el-form-item label="真实姓名">
            <el-input v-model="coachApplyForm.realname"></el-input>
        </el-form-item>
        <el-form-item label="流派">
            <el-select v-model="coachApplyForm.style" placeholder="请选择你的主要流派">
                <el-option label="印式瑜伽" value="印式瑜伽"></el-option>
                <el-option label="泰式瑜伽" value="泰式瑜伽"></el-option>
                <el-option label="中式瑜伽" value="中式瑜伽"></el-option>
                <el-option label="其他" value="其他"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="身份证号">
            <el-input v-model="coachApplyForm.number"></el-input>
        </el-form-item>
        <el-form-item label="你的场馆">
            <el-select v-model="coachApplyForm.venueId" placeholder="请选择你的主要流派">
                <el-option v-for="v in venue" :key="v.name" :label="v.name" :value="v.venueId"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="个人介绍">
            <el-input type="textarea" v-model="coachApplyForm.introduce"></el-input>
        </el-form-item>
<!--        <el-form-item label="课时费">-->
<!--            <el-input v-model="coachApplyForm.price" placeholder="请输入你的课时费标准/h"></el-input>-->
<!--        </el-form-item>-->
        <el-form-item>
            <el-button type="primary" @click="onSubmit">立即申请</el-button>
            <el-button type="primary" @click="checkApply">查看过往申请</el-button>
        </el-form-item>
    </el-form>
    <!--预约界面-->
    <el-drawer title="我的预约" :visible.sync="drawer" :direction="direction">
        <template slot-scope="scope">
            <el-row>
                <el-col>
                    <template>
                        <el-table
                                :data="apply"
                                style="width: 100%">
                            <el-table-column
                                    prop="no"
                                    label="申请单号"
                                    width="180">
                            </el-table-column>
                            <el-table-column
                                    prop="realname"
                                    label="真实姓名"
                                    width="180">
                            </el-table-column>
                            <el-table-column
                                    prop="venueName"
                                    label="所属场馆">
                            </el-table-column>
                            <el-table-column
                                    prop="introduce"
                                    label="个人介绍">
                            </el-table-column>
                            <el-table-column
                                    prop="state"
                                    label="状态">
                            </el-table-column>
                            <el-table-column
                                    prop="message"
                                    label="备注">
                            </el-table-column>
                        </el-table>
                    </template>
                </el-col>
            </el-row>
        </template>
    </el-drawer>
</div>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                direction: "btt",
                drawer: false,
                coachApplyForm: {},
                venue: {
                    venueId:"",
                    name:""
                },
                apply: []
            }
        },
        methods: {
            onSubmit() {
                axios.post("/account/be" ,this.coachApplyForm).then(resp => {
                    if (resp.data.code == 200 && resp.status == 200) {
                        this.$message({type: 'success',message: '申请发送成功!'});

                        // alert("申请发送成功");
                    }
                })
            },
            checkApply() {
                this.drawer = true;
                this.query();
            },
            queryVenue() {
                axios.get("/venue/query").then(resp => {
                    if (resp.data.code == 200 && resp.status == 200) {
                        this.venue = resp.data.data;
                    }
                })
            },
            query() {
                axios.get("/coachApply/query").then(resp => {
                    if (resp.data.code == 200 && resp.status == 200) {
                        this.apply = resp.data.data;
                    }

                })
            }
        },
        created() {
            this.query();
            this.queryVenue();
        }
    })
</script>
</body>
</html>